<!DOCTYPE html>
<html lang="en-us" dir="ltr">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=54032&amp;path=livereload" data-no-instant defer></script>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="
  Tabs
  #

Tabs let you organize content by context, for example installation instructions for each supported platform.
{{&lt; tabs &#34;id&#34; &gt;}}
{{% tab &#34;MacOS&#34; %}} # MacOS Content {{% /tab %}}
{{% tab &#34;Linux&#34; %}} # Linux Content {{% /tab %}}
{{% tab &#34;Windows&#34; %}} # Windows Content {{% /tab %}}
{{&lt; /tabs &gt;}}

  Example
  #






MacOS

  MacOS
  #

This is tab MacOS content.
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
protulit, sed sed aere valvis inhaesuro Pallas animam: qui quid, ignes.
Miseratus fonte Ditis conubia.">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#343a40">
<meta name="color-scheme" content="light dark"><meta property="og:url" content="http://localhost:54032/docs/shortcodes/tabs/">
  <meta property="og:site_name" content="My New Hugo Site">
  <meta property="og:title" content="My New Hugo Site">
  <meta property="og:description" content="Tabs # Tabs let you organize content by context, for example installation instructions for each supported platform.
{{&lt; tabs &#34;id&#34; &gt;}} {{% tab &#34;MacOS&#34; %}} # MacOS Content {{% /tab %}} {{% tab &#34;Linux&#34; %}} # Linux Content {{% /tab %}} {{% tab &#34;Windows&#34; %}} # Windows Content {{% /tab %}} {{&lt; /tabs &gt;}} Example # MacOS MacOS # This is tab MacOS content.
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui quid, ignes. Miseratus fonte Ditis conubia.">
  <meta property="og:locale" content="en_us">
  <meta property="og:type" content="article">
    <meta property="article:section" content="docs">
<title>Tabs | My New Hugo Site</title>
<link rel="icon" href="/favicon.png" >
<link rel="manifest" href="/manifest.json">
<link rel="canonical" href="http://localhost:54032/docs/shortcodes/tabs/">
<link rel="stylesheet" href="/book.min.a7616cf2799b58bddffce9438e31fdbfc6393687cfc0950a4a17cd1cce7e35f6.css" integrity="sha256-p2Fs8nmbWL3f/OlDjjH9v8Y5NofPwJUKShfNHM5&#43;NfY=" crossorigin="anonymous">
  <script defer src="/fuse.min.js"></script>
  <script defer src="/en.search.min.3b66ea01407e4b556d070fc3406a66155de140c5ac1f7d1addeb34c22a5f9f30.js" integrity="sha256-O2bqAUB&#43;S1VtBw/DQGpmFV3hQMWsH30a3es0wipfnzA=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->
  
</head>
<body dir="ltr">
  <input type="checkbox" class="hidden toggle" id="menu-control" />
  <input type="checkbox" class="hidden toggle" id="toc-control" />
  <main class="container flex">
    <aside class="book-menu">
      <div class="book-menu-content">
        
  <nav>
<h2 class="book-brand">
  <a class="flex align-center" href="/"><span>My New Hugo Site</span>
  </a>
</h2>


<div class="book-search hidden">
  <input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
  <div class="book-search-spinner hidden"></div>
  <ul id="book-search-results"></ul>
</div>
<script>document.querySelector(".book-search").classList.remove("hidden")</script>















  
  <ul>
    
      
        <li class="book-section-flat" >
          
  
  

  
    <a href="/docs/example/" class="">Example Site</a>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/example/table-of-contents/" class="">Table of Contents</a>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/example/table-of-contents/with-toc/" class="">With ToC</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/example/table-of-contents/without-toc/" class="">Without ToC</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-4e600aa82e66db664aa5a8e4d34a9224" class="toggle"  />
    <label for="section-4e600aa82e66db664aa5a8e4d34a9224" class="flex justify-between">
      <a role="button" class="">Collapsed</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/example/collapsed/3rd-level/" class="">3rd Level</a>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/example/collapsed/3rd-level/4th-level/" class="">4th Level</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
  </ul>

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li class="book-section-flat" >
          
  
  

  
    <span>Shortcodes</span>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/buttons/" class="">Buttons</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/columns/" class="">Columns</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/details/" class="">Details</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/hints/" class="">Hints</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/mermaid/" class="">Mermaid</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/my/" class="">My</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/tabs/" class="active">Tabs</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/katex/" class="">KaTeX</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
  </ul>










  
<ul>
  
  <li>
    <a href="/posts/"  >
        Blog
      </a>
  </li>
  
</ul>






</nav>




  <script>(function(){var e=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(){localStorage.setItem("menu.scrollTop",e.scrollTop)}),e.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>


 
      </div>
    </aside>

    <div class="book-page">
      <header class="book-header">
        
  <div class="flex align-center justify-between">
  <label for="menu-control">
    <img src="/svg/menu.svg" class="book-icon" alt="Menu" />
  </label>

  <h3>Tabs</h3>

  <label for="toc-control">
    
    <img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
    
  </label>
</div>


  
  <aside class="hidden clearfix">
    
  
<nav id="TableOfContents">
  <ul>
    <li><a href="#example">Example</a></li>
  </ul>
</nav>



  </aside>
  
 
      </header>

      
      
  <article class="markdown book-article"><h1 id="tabs">
  Tabs
  <a class="anchor" href="#tabs">#</a>
</h1>
<p>Tabs let you organize content by context, for example installation instructions for each supported platform.</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-tpl" data-lang="tpl"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">tabs</span> <span style="color:#e6db74">&#34;id&#34;</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#a6e22e">tab</span> <span style="color:#e6db74">&#34;MacOS&#34;</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span> # MacOS Content <span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">tab</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#a6e22e">tab</span> <span style="color:#e6db74">&#34;Linux&#34;</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span> # Linux Content <span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">tab</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#a6e22e">tab</span> <span style="color:#e6db74">&#34;Windows&#34;</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span> # Windows Content <span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">tab</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">tabs</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
</span></span></code></pre></div><h2 id="example">
  Example
  <a class="anchor" href="#example">#</a>
</h2>
<div class="book-tabs">



<input type="radio" class="toggle" name="tabs-0" id="tabs-0-0" checked="checked" />
<label for="tabs-0-0">MacOS</label>
<div class="book-tabs-content markdown-inner"><h1 id="macos">
  MacOS
  <a class="anchor" href="#macos">#</a>
</h1>
<p>This is tab <strong>MacOS</strong> content.</p>
<p>Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
protulit, sed sed aere valvis inhaesuro Pallas animam: qui <em>quid</em>, ignes.
Miseratus fonte Ditis conubia.</p>
</div>



<input type="radio" class="toggle" name="tabs-0" id="tabs-0-1"  />
<label for="tabs-0-1">Linux</label>
<div class="book-tabs-content markdown-inner"><h1 id="linux">
  Linux
  <a class="anchor" href="#linux">#</a>
</h1>
<p>This is tab <strong>Linux</strong> content.</p>
<p>Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
protulit, sed sed aere valvis inhaesuro Pallas animam: qui <em>quid</em>, ignes.
Miseratus fonte Ditis conubia.</p>
</div>



<input type="radio" class="toggle" name="tabs-0" id="tabs-0-2"  />
<label for="tabs-0-2">Windows</label>
<div class="book-tabs-content markdown-inner"><h1 id="windows">
  Windows
  <a class="anchor" href="#windows">#</a>
</h1>
<p>This is tab <strong>Windows</strong> content.</p>
<p>Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
protulit, sed sed aere valvis inhaesuro Pallas animam: qui <em>quid</em>, ignes.
Miseratus fonte Ditis conubia.</p>
</div>



</div>

</article>
 
      

      <footer class="book-footer">
        
  <div class="flex flex-wrap justify-between">





</div>



  <script>(function(){function e(e){const t=window.getSelection(),n=document.createRange();n.selectNodeContents(e),t.removeAllRanges(),t.addRange(n)}document.querySelectorAll("pre code").forEach(t=>{t.addEventListener("click",function(){if(window.getSelection().toString())return;e(t.parentElement),navigator.clipboard&&navigator.clipboard.writeText(t.parentElement.textContent)})})})()</script>


 
        
      </footer>

      
  
  <div class="book-comments">

</div>
  
 

      <label for="menu-control" class="hidden book-menu-overlay"></label>
    </div>

    
    <aside class="book-toc">
      <div class="book-toc-content">
        
  
<nav id="TableOfContents">
  <ul>
    <li><a href="#example">Example</a></li>
  </ul>
</nav>


 
      </div>
    </aside>
    
  </main>

  
</body>
</html>












